<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="header">
			<image src="../../static/static/loginlogo.png" mode="heightFix"></image>
			<text>中金国际</text>
		</view>
		<!-- 轮播图 -->
		<view class="swp">
			<u-swiper bg-color="#151936" mode="none" height="305" img-mode="scaleToFill" border-radius="20" :autoplay="true" :list="list">
			</u-swiper>
		</view>
		<!-- 三个板块 -->
		<view class="tradeBox">
			<view class="Bleft" @click="navto(1)">
				<view>中金国际</view>
				<view>交易大厅</view>
			</view>
			<view class="Bright">
				<view @click="navto(2)">
					<image src="../../static/static/promotion.png" mode="widthFix"></image>
					<text>优惠活动</text>
				</view>
				<view @click="navto(3)">
					<image src="../../static/static/trade3.png" mode="widthFix"></image>
					<text>平臺資訊</text>
				</view>
			</view>
		</view>
		<!-- 市场动态 -->
		<view class="normalTitle1">
			<view><text>市场动态</text></view>
		</view>
		<!-- 滚动表头 -->
		<view class="scroll-box">
			<view>
				<text>交易用户</text>
				<text>交易品类</text>
				<text>当轮获利</text>
				<text>交易日期</text>
			</view>
		</view>
		<!-- 滚动内容 -->
		<view class="scroll-body">
			<view v-for="(item,i) in userList" :key="i">
				<text>{{item.id}}</text>
				<text>{{item.title}}</text>
				<text>{{item.huoli}}</text>
				<text>{{item.content}}</text>
			</view>
		</view>
		<view class="loading">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
							image: '../../static/static/banner1.png',
						},
						{
							image: '../../static/static/banner2.png',
						},
						{
							image: '../../static/static/banner3.png',
						}
				],
				userList:[], // 用户信息
			}
		},
		onShow() {
			if (uni.getStorageSync('Authorized')) {
				this.getlist()
			} else{
				uni.navigateTo({
					url:"/pages/login/index"
				})
			}
		},
		methods: {
			// 市场动态数据
			getlist(){
				this.$u.api.index().then(res => {
					this.userList = res.indexdata
				})
			},
			// getlist(){
			// 	this.$u.api.service({
			// 		action: "getPrizeList",
			// 		count: 20,
			// 		terminal_id: 2,
			// 		debug: false,
			// 		lang: "zh",	
			// 	}).then(res => {
			// 		this.userList = res.data
			// 	})
			// },
			// 路由跳转
			navto(index){
				if(index == 1){
					// uni.navigateTo是跳非tabbar的
					uni.navigateTo({
						url:"/pages/index/jydt"
					})
				} else if(index == 2){
					uni.navigateTo({
						url:"/pages/index/yhhd"
					})
				} else if(index == 3){
					uni.navigateTo({
						url:"/pages/index/pyzx"
					})
				}
			},
		}
	}
</script>

<style scoped>
.content{
	padding: 0 20upx;
}
.header{
	height: 88upx;
	display: flex;
	align-items: center;
}
.header image{
	height: 32px;
}
.header text{
	font-size: 28upx;
	margin-left: 20upx;
	color: white;
}

.swp{
	margin-top: 20upx;
	margin-bottom: 30upx;
	height: 305upx;
	box-sizing: border-box;
}

.tradeBox{
	height: 180upx;
	display: flex;
	justify-content: space-between;
	padding: 0 20upx;
}
.tradeBox .Bleft{
	width: 372upx;
	background: url(../../static/static/trade1.png) no-repeat center center;
	background-size: 100% 100%;
	padding: 30upx 0 0 40upx;
}
.tradeBox .Bleft view:nth-of-type(1){
	line-height: 60upx;
	font-size: 56upx;
	color: #c3c7da;
}
.tradeBox .Bleft view:nth-of-type(2){
	line-height: 80upx;
	font-size: 44upx;
	color: #c3c7da;
	margin-top: 10upx;
}
.tradeBox .Bright{
	width: 280upx;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
.tradeBox .Bright view{
	width: 280upx;
	height: 78upx;
	padding: 0 20upx;
	background: #31395e;
	display: flex;
	align-items: center;
}
.tradeBox .Bright view image{
	width: 40upx;
	margin-right: 16upx;
}
.tradeBox .Bright view text{
	color: #c3c7da;
	font-size: 28upx;
}

.normalTitle1{
	margin-top: 36upx;
	height: 80upx;
	padding: 0 20upx;
}
.normalTitle1 view{
	background: #31395e;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.normalTitle1 view text{
	color: #f4f4f4;
	font-size: 28upx;
	height: 48upx;
	line-height: 48upx;
	width: 640upx;
	display: block;
	border-left: 4upx solid #f4f4f4;
	text-indent: 20upx;
}

.scroll-box{
	margin-top: 30upx;
	height: 60upx;
	padding: 0 20upx;
}
.scroll-box view{
	height: 60upx;
	display: flex;
}
.scroll-box view text{
	flex: 1;
	text-align: center;
	line-height: 60upx;
	color: #cdcdd2;
	font-size: 26upx;
}

.scroll-body{
	height: 300upx;
	padding: 0 20upx;
	overflow: hidden;
}
.scroll-body view{
	display: flex;
}
.scroll-body view text{
	flex: 1;
	display: block;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.scroll-body view text:nth-of-type(1){
	color: #538cbb;
}
.scroll-body view text:nth-of-type(2){
	color: #cdcdd2;
}
.scroll-body view text:nth-of-type(3){
	color: #538cbb;
}
.scroll-body view text:nth-of-type(4){
	color: #cdcdd2;
}
/* 动画 */
@keyframes  move{
0%{transform:translateY(0)}
100%{transform:translateY(-2700upx)}
}
.scroll-body view{
	animation:move 70s linear infinite
} 
/*both:运动结束后停留在终点*/
</style>
